<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Hello All. This is Ambika.</title>


<link href="Ambika.css" rel="stylesheet" />

<style type="text/css">

body{

background-color: pink;

}


h1{

font-weight: bolder;
color:  red;
font-size: 2em;
}


h2{

font-weight: bolder;
color:  orange;
font-size: 2em;
}

h3{

font-weight: bolder;
color:  yellow;
font-size: 2em;
}

h4{

font-weight: bolder;
color:  green;
font-size: 2em;
}

h5{

font-weight: bolder;
color:  blue;
font-size: 2em;
}

h6{

font-weight: bolder;
color:  indigo;
font-size: 2em;
}

h7{

font-weight: bolder;
color:  purple;
font-size: 2em;
}
</style>


</head>

<body>
	<h1>Hello All. This is Ambika.</h1>

    <h2 id="header1">Hello everyone with #header1</h2>
    
    <h3 id="header2" class="custom_header">Hello everyone with CSS class "custom_header"</h3>
    <h4 id="header3" class="custom_header">Hello everyone with CSS class "custom_header"</h4>
    <h5 id="header4" class="custom_header">Hello everyone with CSS class "custom_header"</h5>
    
    <div id="my_div">
     <h6 id="header4">Hello everyone with id #header4 in a div with id #my_div</h6>
     <h7 id="header5">Hello everyone with id #header5 in a div with id #my_div</h7>
    </div>
    
    <h3> This is stand alone /general h3 heading 
    </h3>
    
    <div>
    <h3>This is header h3 within div tag</h3>
    </div>
    
    
     <h1 id="header6" >Hello World with id #header6 </h1>
    <h1 id="header7" ">Hello World with id #header7 </h1>

</body>
  
<form id = "myForm" name = "myForm">

<b><i>Ambika				Here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i></b> 
<hr/>
<pre> ambika is a java learner </pre>
<label for = "userName" id = "userNameLabel "> User Name </label>
<input
 type = "text" name = "userName" id = "userName"/><br/>
 
<label 
	for = "password" id = "passwordLabel "> Password </label> 
	<input
	type = "password" name = "password" id = "password"/>
	<br/> 
	<br/> 
	<input
	type = "radio" id = "radio1" name = "option"  required = "required"/> SampleOption1 
	<input
	type = "radio" id = "radio2" name = "option" /> SampleOption2 
	<input
	type = "radio" id = "radio3" name = "option" /> SampleOption3 
	<input
	type = "radio" id = "radio4" name = "option" /> SampleOption4 
	<input
	type = "radio" id = "radio5" name = "option" /> SampleOption5
	<br/>
	<br/>
	<select id = "dropdown1" name = "dropdown1"  multiple = "multiple" required = "required">
		<option id = "1"> Sample Option 1</option>
		<option id = "2"> Sample Option 2 </option>
		<option id = "3"> Sample Option 3 </option>
		<option id = "4"> Sample Option 4 </option>
		<option id = "5"> Sample Option 5 </option>
	</select>
	<br/>
	<br/>
	<input type = "checkbox" id = "check1" name = "checkbox"/> Sample Check 1
	<input type = "checkbox" id = "check2" name = "checkbox"/> Sample Check 2
	<input type = "checkbox" id = "check3" name = "checkbox"/> Sample Check 3
	<input type = "checkbox" id = "check4" name = "checkbox"/> Sample Check 4
	<input type = "checkbox" id = "check5" name = "checkbox"/> Sample Check 5
	<br/>
	<br/>
	<input 
	type = "submit" name = "demoSubmit" value = "Login"/>
	
	
	<ul>
	<li> Sample item 1</li>
	<li> Sample item 2</li>
	</ul>
	
	<ol>
		<li> Ordered Sample item 1 </li>
		<li> Ordered Sample item 2 </li>
	</ol>
	
	<table border = "1">
	<tbody>
	<tr>
	<td>sample data 1 </td>
	<td>sample data 2 </td>
	<td>sample data 3 </td>
	</tr>
	<tr>
	<td>sample data 1 </td>
	<td>sample data 2 </td>
	<td>sample data 3 </td>
	</tr>
	<tr>
	<td>sample data 1 </td>
	<td>sample data 2 </td>
	<td>sample data 3 </td>
	</tr>
	</tbody>
	</table>
	<input type = "reset" name = "reset" value = "Reset Form" />
</form>

</html>